<template>
  <div>
	  <!-- 头部banner -->
	  <HeaderNav v-if="$channel=='zyzq' && getPlatform =='app'"></HeaderNav>
	  <div class="top-wrap-parent" :style="{background : skinInfo.backImg ?'url('+skinInfo.backImg+')'  : skinInfo.backColor ? skinInfo.backColor : '#FFFFFF'}">
        <div class="top-wrap">
			<Banner></Banner>
			<HomeLiveModule :list='computerLiveArray' typeCom="live" v-if="computerLiveArray.length>0"></HomeLiveModule>
			<HotAnchor :list='anchorFCArray' typeCom="anchor" v-if="anchorFCArray.length>0"></HotAnchor>
			<GreatVideo></GreatVideo>
		</div>
	</div>
  <AnimationActivity  v-if = 'isAniActivity'  :offAnimationNum = 'offAnimationNum'   :animationActivityData = 'animationActivityData' :activityHomeIcon = 'activityHomeIcon' />
  <!-- 全局背景层组件 -->
  <GlobalMask @formChildMsg='formChildData' v-if="isGlobalMask" />
  </div>
</template>
<script>
    import HeaderNav from "../components/zyzq/headerNav";
	import Banner from "../components/zyzq/bannerZYZQ";
	import HomeLiveModule from './homeCom/homeLiveModule.vue'; //首页直播预告组件
	import HotAnchor from './homeCom/hotAnchor.vue'; //首页热门主播组件
	import GreatVideo from './homeCom/greatVideo' //首页精彩视频组件
import AnimationActivity from '@/components/animationActivity.vue'; //活动动画组件
import GlobalMask from '@/components/globalMask'; //全局背景层组件
	export default {
		components: {
			HeaderNav,
			Banner,
			HomeLiveModule,
			HotAnchor,
			GreatVideo,
      AnimationActivity,
       GlobalMask,//全局背景层组件
		},
		data() {
			return {
				computerLiveArray: [], //计算之后的直播预告列表  不超过5个  直播优先5个
				listArray: [], //保存直播预告id数组
				isClickLiveMore: window.localStorage.getItem(this.$channel + '_clickLiveMore'),
				anchorFCArray: [], //热门主播
				getPlatform:fun.getPlatform(), //app wx
				scroll:0,//页面滚动距离
        isAniActivity:false,//首页活动组件
        animationActivityData:[],
        offAnimationNum:0,
        activityHomeIcon:'',//活动后台配置图标
			}
    },
	beforeRouteLeave(to, from, next) {
			let pathList =[`/${channel}/mine`,`/${channel}/telChannel`] //除了首页二级页面 从其它页面过来滚动到最顶部
			if(pathList.includes(to.path)){
			    this.scroll = 0
			}else{
				this.scroll = document.getElementsByClassName( "top-wrap-parent")[0].scrollTop;
			}
		   next();
      },
    activated:function(){
	  this.getRoomList();
	  this.listArray = [];
      this.$store.dispatch("showNav");
	  fun.dotNum('home_page');
	  document.getElementsByClassName( "top-wrap-parent")[0].scrollTop = this.scroll;//设置滚动
    },
    computed: {
      skinInfo() {
        return this.$store.state.skinStoreInfo
      },
      isGlobalMask() { //操作面板外层透明蒙版 显示
           return this.$store.state.globalMask.isShow
      },
    },
		created() {
			this.getAnchorArrayTop(); //热门主播前五
      this.getHomeActivityIcon()
      // fun.getActivityData(0,0,(res)=>{// 0  首页  0  首页id
      //    //console.log(res.data.data[3])
      //    if(res.data.data[3].length){
      //       this.animationActivityData = res.data.data[3];
      //       this.isAniActivity = true;
      //    }
      // })
		},
		mounted() {},
		methods: {
      getHomeActivityIcon(){//获取首页活动配置图标
         this.$http.get("/h5live/hzb/activity/topIcon")
           .then(res => {
             if (res.data.code == "000000") {//type  0 默认 1 自定义
                if(res.data.data && res.data.data.type =='1'){
                   this.activityHomeIcon = res.data.data.iconUrl
                }
                fun.getActivityData(0,0,(res)=>{// 0  首页  0  首页id
                   //console.log(res.data.data[3])
                   if(res.data.data[3].length){
                      this.animationActivityData = res.data.data[3];
                      this.isAniActivity = true;
                   }
                })
             }
           })
           .catch(response => {
             console.log(response);
           });
      },
      formChildData(data){
        switch (data.type){
          case 'closeAllPopup':
            this.offAnimationNum++;
            this.$store.dispatch("globalMask", {isShow:false,bgColor:''});
            break;
          default:
            break;
        }
      },
			//获取直播间列表
			getRoomList() {
				this.$http
					.get(`/h5live/getRoomList?plat=${fun.getPlatform()}`)
					.then(res => {
						if(res.data.code == "000000") {
							let startRoomList = res.data.data.startRoomList
							let forecastRoomList = res.data.data.forecastRoomList
							this.computerLiveArray = [...startRoomList, ...forecastRoomList].slice(0, 5); //首页只显示前五个  直播靠前
							[...res.data.data.startRoomList, ...res.data.data.forecastRoomList].map(item => { //保存直播预告id
								this.listArray.push(item.id)
							})
							if(this.isClickLiveMore == false || this.isClickLiveMore == null) { //没有点
								if(this.listArray.length > 3) {
									//console.log(this.listArray.length)
									this.$store.dispatch('changeDotNum', this.listArray.length - 3)
								}
								window.localStorage.setItem(this.$channel + '_ListArray', JSON.stringify(this.listArray))
							} else if(this.isClickLiveMore == 'true') {
								let locListArray = JSON.parse(window.localStorage.getItem(this.$channel + '_ListArray'))
								let newArray = this.listArray.filter(item => {
									return locListArray.indexOf(item) == -1
								})
								if(newArray.length >= 1 && this.listArray.length > 3) {
									let getMin = [newArray.length, this.listArray.length - 3]
									//console.log(getMin)
									//console.log(Math.min(...getMin));
									this.$store.dispatch('changeDotNum', Math.min(...getMin))
								}
								window.localStorage.setItem(this.$channel + '_ListArray', JSON.stringify(this.listArray))
							}

						} else {}
					})
					.catch(response => {
						console.log(response);
					});
			},
			//热门主播top
			getAnchorArrayTop() {
				this.$http.get("/h5live/getZhuBoTop")
					.then(res => {
						if(res.data.code == "000000") {
							//console.log(res.data)
							if(res.data.code === '000000') {
								if(res.data.data) { //防止后端给null
									this.anchorFCArray = res.data.data
								}
							}
						} else {}
					})
					.catch(response => {
						console.log(response);
					});
			},
		},
	};
</script>
<style scoped>
	.top-wrap-parent {
/* 	background: #F1F1F1; */
	  width: 100vw;
    height: calc(100vh - 3rem - 88px);
    overflow-y: scroll;
    background-size: 100% 1334px !important;
    background-repeat: repeat-y !important;
	}

.top-wrap {
    width: 100vw;
	min-height: calc(100vh - 96px);
	}
.top-wrap .list-header{
	position: absolute;
	top: 0;
	z-index: 2;
}
.top-wrap .list-header+.home-banner{
	margin-top: 88px;
}
</style>
